<template>
  <div class="upload">
    <div style="color: red">备注:标签的ref属性</div>
    <br />
    <div style="color: red">1.用在普通DOM标签上，获取的是DOM节点</div>
    <br />
    <div style="color: red">2.用在组件标签上，获取的是组件实例对象</div>
    <br />
    <div style="color: red">
      3.父组件可以通过ref拿到子组件的实例,并且可以-获取-和-修改-子组件的属性和调用子组件的方法
    </div>
    <br />
    <div style="color: red">
      4.子组件需要使用defineExpose向外导出父组件才可以拿到属性和方法
    </div>
    <br />
    <Child ref="childRef" />

    <button @click="getChildRef">获取Child实例</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Child from "./components/Child.vue";

const childRef = ref();
const getChildRef = () => {
  childRef.value.num = 5;
  childRef.value.changeAge();
  console.log(childRef.value.num);
};
</script>

<style scoped lang="scss">
@import "./index.module.scss";
</style>
